<template>
  <div id="topbar-wrap" class="shadow-sm">
    <div class="ec-wrapper">
      <div class="flex justify-between align-center" style="height: 100%">
        <div class="flex align-center">
          <div class="ml-2">
            <el-link href="https://element-plus.org" :underline="false">
              机器人有效期：2026-07-03 直播有效期：2024-02-12 23:59:59 续费
            </el-link>
          </div>
        </div>

        <div class="flex align-center">
          <div class="mx-2">
            <el-icon class="email m-right">
              <Message />
            </el-icon>
          </div>

          <div class="user-drop">
            <el-dropdown @command="handleUserCommand">
              <span class="flex align-center">
                <el-icon class="m-right">
                  <User />
                </el-icon>
                <span>{{useLocale.userName}}</span>
                <el-icon class="m-left">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item :icon="SwitchButton" command="quit"
                    >退出</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div class="ml-2 user-lang">
            <el-dropdown @command="handleLang">
              <div class="wrap">
                <svg
                  t="1704970215044"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2399"
                  width="24"
                  height="24"
                >
                  <path
                    d="M870.912 103.936H152.576c-47.616 0-86.528 38.912-86.528 86.528v526.848c0 47.616 38.912 86.528 86.528 86.528h224.256l111.616 111.616c6.656 6.656 14.848 9.728 23.552 9.728s16.896-3.072 23.552-9.728l111.616-111.616h224.256c47.616 0 86.528-38.912 86.528-86.528V190.464c-0.512-47.616-38.912-86.528-87.04-86.528z m19.968 613.376c0 10.752-8.704 19.968-19.968 19.968H640c-10.24-2.048-21.504 1.024-29.696 9.216L512 844.8l-98.304-98.304c-8.192-8.192-19.456-11.264-29.696-9.216H152.576c-10.752 0-19.968-8.704-19.968-19.968V190.464c0-10.752 8.704-19.968 19.968-19.968h718.336c11.264 0 19.968 8.704 19.968 19.968v526.848z"
                    fill="#3E3A39"
                    p-id="2400"
                  ></path>
                  <path
                    d="M248.32 258.56c-16.896 0-30.72 13.312-31.744 30.208v317.44c0 17.408 14.336 31.744 31.744 31.744 17.408 0 31.744-14.336 31.744-31.744v-317.44c-1.024-16.896-14.848-30.208-31.744-30.208z"
                    fill="#FA7268"
                    p-id="2401"
                  ></path>
                  <path
                    d="M515.072 378.368c-9.216-7.168-20.992-12.288-34.304-14.848-13.312-3.072-28.672-4.096-45.568-4.096-14.336 0-27.136 1.536-37.888 4.096-10.752 2.56-20.48 6.144-28.672 10.24-8.192 4.096-15.36 9.216-20.992 14.336-4.608 4.608-8.704 9.728-11.776 14.336-4.608 5.632-7.68 12.8-7.68 20.48 0 17.408 14.336 31.744 31.744 31.744 15.36 0 28.16-10.752 31.232-25.088l0.512-0.512c2.56-2.56 5.632-5.12 9.216-7.168 4.096-2.048 8.704-4.096 13.824-5.12 5.632-1.536 11.776-2.048 19.456-2.048s14.848 0.512 20.992 2.048c5.632 1.024 10.24 3.072 13.824 5.632 3.584 2.56 6.144 5.632 8.192 9.728 2.048 4.096 3.072 10.24 3.072 16.896v4.608l-48.64 4.608c-14.336 1.536-27.648 3.584-39.424 7.168-12.288 3.584-23.552 8.192-32.768 14.848-9.216 6.656-16.896 15.872-22.016 26.624s-8.192 24.064-8.192 39.424c0 11.776 2.048 22.528 5.632 32.768 3.584 9.728 9.216 18.944 16.384 26.112 7.168 7.168 15.872 13.312 26.112 16.896 10.24 4.096 22.016 6.144 35.328 6.144 15.872 0 30.72-3.584 44.544-10.24 8.704-4.608 17.408-9.728 25.6-15.872v9.728c0 16.896 13.824 30.72 30.72 30.72s30.72-13.824 30.72-30.72V450.048c0-16.896-2.56-31.232-7.168-43.008-5.12-11.776-12.288-21.504-22.016-28.672z m-34.816 167.424c-4.096 3.072-8.192 6.656-12.288 9.216-5.12 3.584-10.24 6.656-14.848 9.216-5.12 2.56-9.728 4.608-14.336 6.144-4.608 1.536-8.704 2.048-12.8 2.048-10.752 0-18.432-2.048-24.064-6.144-5.12-3.584-7.168-11.264-7.168-21.504 0-6.144 1.024-11.776 3.584-15.872 2.56-4.096 5.632-7.68 10.24-10.752 5.12-3.072 11.264-5.632 18.432-7.168 7.68-2.048 16.896-3.072 27.136-4.096l26.624-2.56v41.472zM799.232 384.512c-6.144-8.192-14.336-14.848-24.576-18.944-9.728-4.096-22.016-6.144-36.352-6.144-8.192 0-16.384 1.024-24.576 3.584-8.192 2.56-15.872 5.632-23.552 9.216-7.68 4.096-14.336 8.704-21.504 13.824l-6.144 4.608v-5.632 4.608c0-17.408-14.336-31.232-31.744-31.232s-31.744 13.824-31.744 31.232v-4.608 226.304c0 17.408 14.336 31.744 31.744 31.744s31.744-14.336 31.744-31.744V451.584c4.608-4.096 9.216-7.68 14.336-11.776 5.632-4.096 11.264-8.192 16.896-11.264 5.632-3.072 10.752-5.632 16.384-7.68 5.12-1.536 9.728-2.56 13.824-2.56 6.656 0 11.776 1.024 15.36 2.56 3.072 1.536 5.632 4.096 7.68 8.192 2.048 4.608 3.584 10.24 4.096 17.92 0.512 8.192 1.024 17.92 1.024 29.696v134.656c0 17.408 14.336 31.744 31.744 31.744s31.744-14.336 31.744-31.744V453.12c0-14.336-1.024-27.136-3.584-38.4-2.048-11.776-6.656-22.016-12.8-30.208z"
                    fill="#3E3A39"
                    p-id="2402"
                  ></path>
                </svg>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item v-for="lang in langs" :command="lang">{{
                    lang.text
                  }}</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div class="mx-2 user-skin">
            <el-dropdown @command="handleCommandSkin">
              <div class="wrap">
                <div class="inner">
                  <el-icon class="el-color-picker__icon">
                    <arrow-down />
                  </el-icon>
                </div>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="default">
                    <div style="background: #8dbe4a; width: 28px; height: 28px">
                      &nbsp;
                    </div>
                  </el-dropdown-item>
                  <el-dropdown-item command="ec2-orange">
                    <div style="background: #d99759; width: 28px; height: 28px">
                      &nbsp;
                    </div>
                  </el-dropdown-item>
                  <el-dropdown-item command="ec2-purple">
                    <div style="background: #62359a; width: 28px; height: 28px">
                      &nbsp;
                    </div>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
  Message,
  ArrowDown,
  CircleCheck,
  User,
  SwitchButton,
} from "@element-plus/icons-vue";
import { ref } from "vue";
import { langs } from "@/locales";
import { useLocaleStore } from "@/store/locales";
import router from "@/router";

const useLocale = useLocaleStore();
document.getElementsByTagName("body")[0].className = useLocale.theme;
function handleLang(command: any) {
  console.log(command);
  useLocale.setLocale(command.value);
}
function handleCommandSkin(command: string) {
  console.log(command);
  useLocale.setTheme(command);

  document.getElementsByTagName("body")[0].className = command;

  switch (command) {
    case "default":
      useLocale.setMainColor([
        "#8fb13d",
        "#f56c6c",
        "#58919f",
        "#fac858",
        "#73c0de",
        "#3ba272",
        "#fc8452",
        "#9a60b4",
        "#ea7ccc",
      ]);
      break;
    case "ec2-orange":
      useLocale.setMainColor([
        "#EC9F1E",
        "#f56c6c",
        "#58919f",
        "#fac858",
        "#73c0de",
        "#3ba272",
        "#fc8452",
        "#9a60b4",
        "#ea7ccc",
      ]);
      break;
    case "ec2-purple":
      useLocale.setMainColor([
        "#62359a",
        "#f56c6c",
        "#58919f",
        "#fac858",
        "#73c0de",
        "#3ba272",
        "#fc8452",
        "#9a60b4",
        "#ea7ccc",
      ]);
      break;
  }
}
function handleUserCommand(command: string) {
  console.log(command);
  if (command == "quit") {
    localStorage.clear();
    sessionStorage.clear();
    router.push("/login");
  }
}
</script>
<style lang="scss" scoped>
#topbar-wrap {
  background-color: #fff;
  padding: 0;
  position: fixed;
  width: calc(100% - 200px);
  z-index: 99;
  top: 0;
  left: 200px;
  height: 55px;

  //border-bottom: 1px solid var(--el-border-color);

  > div {
    height: 100%;
  }

  .email {
    :hover {
      color: var(--el-color-primary);
    }
  }

  .user-drop {
    cursor: pointer;
    // color: var(--el-color-primary);
  }

  .el-link {
    font-weight: normal;
    font-size: 14px;
  }

  .user-skin {
    .wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      height: 28px;
      width: 28px;
      padding: 4px;
      border: 1px solid var(--el-border-color);
      border-radius: 4px;
      cursor: pointer;
    }

    .inner {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      background-color: var(--el-color-primary);

      .el-color-picker__icon {
        color: #fff;
      }
    }
    .item {
      height: 28px;
      width: 28px;
    }
    .item1 {
      background: #8dbe4a;
    }
    .item2 {
      background: #d99759;
    }
    .item3 {
      background: #7c57ab;
    }
  }

  .m-right {
    margin-right: 2px;
  }

  .m-left {
    margin-left: 2px;
  }
}
</style>
